

<template>

  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <h2>Hello,Guest</h2>
            <span>欢迎使用猫咪图鉴管理系统</span>
            <br>
            <span>有什么问题可以给我留言喲！</span>
            <br>
            <span>QQ：3110985822</span>
          </div>
          <div class="body">
            <!-- <img
              src="../assets/images/qr_coder.jpg"
              alt="donate"
              width="100%"
            /> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>



<!--<template>-->



<!--  <div class="index01" >-->
<!--&lt;!&ndash;    <div class="loading">&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="loadbox"> <img src="../../public/static/picture/loading.gif"> 页面加载中... </div>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--    <div class="back"></div>-->
<!--    <div class="head">-->
<!--      <h1>驾校数据可视化展示平台</h1>-->
<!--      <div class="weather"><span id="showTime"></span></div>-->
<!--    </div>-->

<!--    <div class="mainbox">-->
<!--      <ul class="clearfix">-->
<!--        <li>-->
<!--          <div class="boxall" style="height:545px;">-->

<!--            <div class="navboxall" >-->
<!--              <div class="sycm">-->
<!--                <ul class="clearfix">-->
<!--                  <li>-->
<!--                    <h2>192,864</h2>-->
<!--                    <span>总收入</span></li>-->
<!--                  <li>-->
<!--                    <h2>1,572</h2>-->
<!--                    <span>员工数量</span></li>-->

<!--                </ul>-->

<!--              </div>-->

<!--              <ul class="jindu clearfix">-->
<!--                <div>91,426</div>-->
<!--                <div>782</div>-->
<!--                <li id="zb1"></li>-->
<!--                <li id="zb2"></li>-->
<!--                <li id="zb3"></li>-->
<!--                <li id="zb4"></li>-->
<!--              </ul>-->
<!--            </div>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="boxall" style="height:545px">-->
<!--            <div class="alltitle">年度收入</div>-->
<!--            <div class="navboxall" id="echart4"></div>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li>-->
<!--          <div class="boxall" style="height:260px">-->
<!--            <div class="alltitle">支出占比</div>-->
<!--            <div class="navboxall" id="echart1"> </div>-->
<!--          </div>-->
<!--          <div class="boxall" style="height:270px">-->
<!--            <div class="alltitle">收入占比</div>-->
<!--            <div class="navboxall"  id="echart2"> </div>-->
<!--          </div>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <ul class="clearfix">-->
<!--        <li>-->
<!--          <div class="boxall" style="height:390px;">-->
<!--            <div class="alltitle">最新学员</div>-->
<!--            <div class="navboxall" >-->
<!--              <div class="wraptit"> <span>报名号</span><span>缴费金额</span><span>报名人</span><span>当前状态</span> </div>-->
<!--              <div class="wrap">-->
<!--                <ul>-->
<!--                  <li>-->
<!--                    <p><span>100021415</span><span>3,999</span><span>张义诚</span><span>01小时</span></p>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <p><span>100021419</span><span>3,999</span><span>梁启鸣</span><span>03小时</span></p>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <p><span>100021518</span><span>3,999</span><span>王凯</span><span>03小时</span></p>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <p><span>100021522</span><span>3,999</span><span>李芳</span><span>05小时</span></p>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <p><span>100021534</span><span>3,999</span><span>邓信凯</span><span>06小时</span></p>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <p><span>100021557</span><span>3,999</span><span>张翠翠</span><span>09小时</span></p>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <p><span>100021578</span><span>3,999</span><span>赵倩</span><span>09小时</span></p>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <p><span>100021592</span><span>3,999</span><span>李媛媛</span><span>12小时</span></p>-->
<!--                  </li>-->

<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li style="width:38%">-->
<!--          <div class="boxall" style="height:390px">-->
<!--            <div class="alltitle">结算金额</div>-->
<!--            <div class="navboxall" id="echart3"></div>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li style="width:38%">-->
<!--          <div class="boxall" style="height:390px">-->
<!--            <div class="alltitle">学员人数</div>-->
<!--            <div class="navboxall" id="echart5"></div>-->
<!--          </div>-->
<!--        </li>-->
<!--      </ul>-->
<!--    </div>-->
<!--  </div>-->









<!--</template>-->


<!--&lt;!&ndash;<script>&ndash;&gt;-->
<!--&lt;!&ndash;var t = null;&ndash;&gt;-->
<!--&lt;!&ndash;t = setTimeout(time,1000);//開始运行&ndash;&gt;-->
<!--&lt;!&ndash;function time()&ndash;&gt;-->
<!--&lt;!&ndash;{&ndash;&gt;-->
<!--&lt;!&ndash;  clearTimeout(t);//清除定时器&ndash;&gt;-->
<!--&lt;!&ndash;  dt = new Date();&ndash;&gt;-->
<!--&lt;!&ndash;  var y=dt.getFullYear();&ndash;&gt;-->
<!--&lt;!&ndash;  var mt=dt.getMonth()+1;&ndash;&gt;-->
<!--&lt;!&ndash;  var day=dt.getDate();&ndash;&gt;-->
<!--&lt;!&ndash;  var h=dt.getHours();//获取时&ndash;&gt;-->
<!--&lt;!&ndash;  var m=dt.getMinutes();//获取分&ndash;&gt;-->
<!--&lt;!&ndash;  var s=dt.getSeconds();//获取秒&ndash;&gt;-->
<!--&lt;!&ndash;  document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+h+"时"+m+"分"+s+"秒";&ndash;&gt;-->
<!--&lt;!&ndash;  t = setTimeout(time,1000); //设定定时器，循环运行&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->


<!--&lt;!&ndash;<script>&ndash;&gt;-->

<!--&lt;!&ndash;$(function(){&ndash;&gt;-->
<!--&lt;!&ndash;  $('.wrap').liMarquee({&ndash;&gt;-->
<!--&lt;!&ndash;    direction: 'up',//身上滚动&ndash;&gt;-->
<!--&lt;!&ndash;    //runshort: false,//内容不足时不滚动&ndash;&gt;-->
<!--&lt;!&ndash;    scrollamount: 20//速度&ndash;&gt;-->
<!--&lt;!&ndash;  });&ndash;&gt;-->
<!--&lt;!&ndash;});&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--&lt;!&ndash;样式引入&ndash;&gt;-->

<!--<style scoped>-->
<!--@import "../../public/static/css/comon0.css";-->
<!--</style>-->

<!--&lt;!&ndash;<script src="public/static/js/jquery.js"></script>&ndash;&gt;-->
<!--&lt;!&ndash;<script src="public/static/js/echarts.min.js"></script>&ndash;&gt;-->
<!--&lt;!&ndash;<script src="public/static/js/js.js"></script>&ndash;&gt;-->
<!--&lt;!&ndash;<script src="public/static/js/jquery.limarquee.js"></script>&ndash;&gt;-->
<!--&lt;!&ndash;<script src="public/static/js/jquery.cxselect.min.js"></script>&ndash;&gt;-->


<!--<script>-->
<!--import $ from 'jquery'-->

<!--// import '../../public/static/js/jquery.cxselect.min.js'-->
<!--// import '../../public/static/js/jquery.limarquee.js'-->
<!--// import '../../public/static/js/echarts.min.js'-->
<!--// import '../../public/static/js/jquery.js'-->
<!--import '../../public/static/js/js.js'-->

<!--export default {-->

<!--  name: "Index",-->
<!--  data() {-->
<!--    return {-->
<!--      // 版本号-->
<!--      version: "1.0.1",-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.loadTime();-->
<!--  },-->

<!--  methods: {-->
<!--    goTarget(href) {-->
<!--      window.open(href, "_blank");-->
<!--    },-->

<!--    loadTime() {-->
<!--      var t = null;-->
<!--      t = setTimeout(time,1000);//開始运行-->
<!--      function time()-->
<!--      {-->
<!--        clearTimeout(t);//清除定时器-->
<!--        var dt = new Date();-->
<!--        var y=dt.getFullYear();-->
<!--        var mt=dt.getMonth()+1;-->
<!--        var day=dt.getDate();-->
<!--        var h=dt.getHours();//获取时-->
<!--        var m=dt.getMinutes();//获取分-->
<!--        var s=dt.getSeconds();//获取秒-->
<!--        document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+h+"时"+m+"分"+s+"秒";-->
<!--        t = setTimeout(time,1000); //设定定时器，循环运行-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped lang="scss">-->


<!--.index01 {-->

<!--  background-image: url(../assets/images/bg.jpg);-->
<!--}-->


<!--.home {-->
<!--  blockquote {-->
<!--    padding: 10px 20px;-->
<!--    margin: 0 0 20px;-->
<!--    font-size: 17.5px;-->
<!--    border-left: 5px solid #eee;-->
<!--  }-->
<!--  hr {-->
<!--    margin-top: 20px;-->
<!--    margin-bottom: 20px;-->
<!--    border: 0;-->
<!--    border-top: 1px solid #eee;-->
<!--  }-->
<!--  .col-item {-->
<!--    margin-bottom: 20px;-->
<!--  }-->

<!--  ul {-->
<!--    padding: 0;-->
<!--    margin: 0;-->
<!--  }-->

<!--  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;-->
<!--  font-size: 13px;-->
<!--  color: #676a6c;-->
<!--  overflow-x: hidden;-->

<!--  ul {-->
<!--    list-style-type: none;-->
<!--  }-->

<!--  h4 {-->
<!--    margin-top: 0px;-->
<!--  }-->

<!--  h2 {-->
<!--    margin-top: 10px;-->
<!--    font-size: 26px;-->
<!--    font-weight: 100;-->
<!--  }-->

<!--  p {-->
<!--    margin-top: 10px;-->

<!--    b {-->
<!--      font-weight: 700;-->
<!--    }-->
<!--  }-->

<!--  .update-log {-->
<!--    ol {-->
<!--      display: block;-->
<!--      list-style-type: decimal;-->
<!--      margin-block-start: 1em;-->
<!--      margin-block-end: 1em;-->
<!--      margin-inline-start: 0;-->
<!--      margin-inline-end: 0;-->
<!--      padding-inline-start: 40px;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--</style>-->

